<template>
  <view class="login-container">
    <view class="login-box">
      <image class="logo" src="@/static/logo.png" mode="aspectFit"></image>
      <view class="title">欢迎登录</view>

      <view class="input-group">
        <view class="input-item">
          <input
              class="input"
              type="text"
              v-model="email"
              placeholder="请输入邮箱"
              @input="errors.email = ''"
          />
          <text class="error-text" v-if="errors.email">{{ errors.email }}</text>
        </view>

        <view class="input-item">
          <input
              class="input"
              type="password"
              v-model="password"
              placeholder="请输入密码"
              @input="errors.password = ''"
          />
          <text class="error-text" v-if="errors.password">{{ errors.password }}</text>
        </view>
      </view>

      <button class="login-btn" @tap="handleLogin">登录</button>

      <view class="register-link" @tap="goToRegister">
        还没有账号？立即注册
      </view>
    </view>
  </view>
</template>

<script>
import { api, setToken } from '@/utils/request.js';

export default {
  data() {
    return {
      email: '',
      password: '',
      errors: {
        email: '',
        password: ''
      }
    };
  },
  onShow() {
    console.log(111, uni.getStorageSync('token'))
    // 已登录用户直接跳转
    if (uni.getStorageSync('token')) {
      uni.switchTab({
        url: '/pages/study/study'
      });
    }
  },
  methods: {
    // 验证邮箱格式
    validateEmail(email) {
      const emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
      return emailRegex.test(email);
    },

    // 验证所有字段
    validateFields() {
      let isValid = true;

      // 重置错误信息
      Object.keys(this.errors).forEach(key => {
        this.errors[key] = '';
      });

      // 验证邮箱
      if (!this.email.trim()) {
        this.errors.email = '请输入邮箱';
        isValid = false;
      } else if (!this.validateEmail(this.email)) {
        this.errors.email = '请输入正确的邮箱格式';
        isValid = false;
      }

      // 验证密码
      if (!this.password) {
        this.errors.password = '请输入密码';
        isValid = false;
      } else if (this.password.length < 6 || this.password.length > 20) {
        this.errors.password = '密码长度应在6-20个字符之间';
        isValid = false;
      }

      return isValid;
    },

    async handleLogin() {
      console.log(111)
      // 验证所有字段
      if (!this.validateFields()) {
        const firstError = Object.values(this.errors).find(error => error);
        if (firstError) {
          uni.showToast({
            title: firstError,
            icon: 'none'
          });
        }
        return;
      }

      try {
        const res = await api.login({
          email: this.email,
          password: this.password
        });
        if (res.code === 200){
          // 存储token
          setToken(res.result.token);

          // 登录成功提示
          uni.showToast({
            title: '登录成功',
            icon: 'success'
          });

          // 跳转到首页
          setTimeout(() => {
            uni.switchTab({
              url: '/pages/study/study'
            });
          }, 1500);
        }else {
          uni.showToast({
            title: res.message,
            icon: 'error'
          });
        }
      } catch (error) {
        uni.showToast({
          title: error.message || '登录失败',
          icon: 'none'
        });
      }
    },

    goToRegister() {
      uni.navigateTo({
        url: '/pages/register/register'
      });
    }
  }
};
</script>

<style lang="scss">
.login-container {
  min-height: 100vh;
  background: linear-gradient(180deg, #4a90e2 0%, #357abd 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 30rpx;

  .login-box {
    width: 90%;
    background: #fff;
    border-radius: 20rpx;
    padding: 40rpx;
    box-shadow: 0 4rpx 30rpx rgba(0, 0, 0, 0.1);

    .logo {
      width: 160rpx;
      height: 160rpx;
      margin: 0 auto 40rpx;
      display: block;
    }

    .title {
      font-size: 40rpx;
      font-weight: bold;
      text-align: center;
      margin-bottom: 60rpx;
      color: #333;
    }

    .input-group {
      margin-bottom: 40rpx;

      .input-item {
        margin-bottom: 20rpx;

        .input {
          width: 500rpx;
          height: 90rpx;
          background: #f5f5f5;
          border-radius: 45rpx;
          padding: 0 40rpx;
          font-size: 28rpx;
        }

        .error-text {
          font-size: 24rpx;
          color: #ff4d4f;
          padding-left: 40rpx;
          margin-top: 10rpx;
        }

        &:last-child {
          margin-bottom: 0;
        }
      }
    }

    .login-btn {
      width: 100%;
      height: 90rpx;
      background: #4a90e2;
      border-radius: 45rpx;
      color: #fff;
      font-size: 32rpx;
      font-weight: bold;
      line-height: 90rpx;
      text-align: center;
      margin-bottom: 30rpx;

      &:active {
        opacity: 0.8;
      }
    }

    .register-link {
      text-align: center;
      font-size: 28rpx;
      color: #4a90e2;

      &:active {
        opacity: 0.8;
      }
    }
  }
}
</style>